<template>
<div class="container">
    <div class="form-container">
        <a-form :model="loginForm" layout="vertical" name="normal_login" class="login-form" @finishFailed="onFinishFailed">
            <h2 style="text-align:center">用户登录</h2>
            <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
                <a-input v-model:value="loginForm.username">
                    <template #prefix>
                        <UserOutlined class="site-form-item-icon" />
                    </template>
                </a-input>
            </a-form-item>

            <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入你的密码' }]">
                <a-input-password v-model:value="loginForm.password">
                    <template #prefix>
                        <LockOutlined class="site-form-item-icon" />
                    </template>
                </a-input-password>
            </a-form-item>

            <a-form-item>
                <a-form-item name="remember" no-style>
                    <a-checkbox v-model:checked="loginForm.remember">记住我</a-checkbox>
                </a-form-item>
                <a class="login-form-forgot" href="">忘记密码</a>
            </a-form-item>

            <a-form-item>
                <a-button :disabled="disabled" type="primary" html-type="submit" @click="onFinish" class="login-form-button">
                    登录
                </a-button>
                或者
                <a href="">立即注册</a>
            </a-form-item>
        </a-form>
    </div>

</div>
</template>

  
<script setup>
import {
    reactive,
    computed,
} from 'vue';
import { login } from '../api/login';
import router from '../router';
const loginForm = reactive({
    username: '',
    password: '',
    remember: true,
});
const onFinish = () => {
    login(loginForm).then(()=>{
        //跳转到系统内部页面
        router.push({name:'layout'})
    })
};
const onFinishFailed = () => {

};
const disabled = computed(() => {
    return !(loginForm.username && loginForm.password);
});
</script>

<style scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* 使用视口高度确保铺满全屏 */
    background-image: url('../assets/image/loginBackground.png');
    background-size: cover;
    /* 使背景图片铺满整个容器 */
    background-position: center;
    /* 背景图片居中显示 */
}

.form-container {
    width: 500px;
    backdrop-filter: blur(10px);
    /* 添加高斯模糊效果 */
    background-color: rgba(255, 255, 255, 0.059);
    /* 设置背景颜色并添加透明度 */
    padding: 20px;
    border-radius: 8px;
    /* 添加圆角 */
}

.login-form {
    max-width: 500px;
}
.login-form-forgot {
    float: right;
}
.login-form-button {
    width: 100%;
}
</style>
